<template>
	<view class="">
		<view class="manage_tab">
			<view class="tab_array">
				<image :src="BASE_IMG_URL+'/ss.png'" mode="scaleToFill"></image>
				<input type="text" @input="searchName" v-model="name" placeholder="供应商名称" class="li_box" />
			</view>
		</view>
		
		<scroll-view scroll-y class="scrollbox" @scrolltolower="loodMore">
			<view class="list_warp">
				<view class="list_li" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="name">供应商名称：{{item.name}}</view>
					<view class="name">联系人：{{item.username}}</view>
					<view class="name">联系电话：{{item.phone}}</view>
				</view>
				<view class="noData"  v-if="list.length == 0">
					暂无更多
				</view>
			</view>
		</scroll-view>
		
		<view class="icon_creat" @click="toAdd">
			<image :src="BASE_IMG_URL+'/1.png'" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/api/http.js'
	import { netSupplierList } from '@/api/api.js'
	
	export default{
		data () {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				page:1,
				name:'',
				totalPage:1,
				list:[]
			}
		},
		onShow() {
			this.init()
		},
		
		methods:{
			searchName() {
				this.init()
			},
			init() {
				this.page = 1
				this.totalPage = 1
				this.list = []
				this.getList()
			},
			loodMore() {
				if(this.page < this.totalPage){
					this.page++
					this.getList()
				}
			},
			getList() {
				let params = {
					page:this.page,
					name:this.name
				}
				netSupplierList(params).then(res=>{
					this.list = this.list.concat(res.data.data)
					this.totalPage = res.data.last_page
				})
			},
			toAdd() {
				uni.navigateTo({
					url:'/pagesB/supplier/addSupplier'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url:'/pagesB/supplier/detail?id='+item.id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 130rpx;
		right: 100rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	//列表内容
	.scrollbox{
		width:750rpx;
		height:calc(100vh - 90rpx);
	}
	.manage_tab{
		width: 100%;
		height: 80rpx;
		background-color: $uni-text-color;
		display: flex;
		justify-content: center;
		align-items: center;
		.tab_array {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background: #fff;
			border-radius: 34rpx;
			height: 68rpx;
			width:660rpx;
			padding:0 15rpx;
			overflow: hidden;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right:15rpx;
			}
			input {
				line-height: 68rpx;
				height: 68rpx;
				width:580rpx;
			}
		}
	}
	.list_warp{
		.list_li{
			width:690rpx;
			background:#fff;
			border-radius: 20rpx;
			margin:24rpx auto 0;
			padding:30rpx;
			.name{
				font-size:24rpx;
				color:#333;
				margin-bottom:15rpx;
				&:last-child{
					margin-bottom:0;
				}
			}
		}
	}
</style>